<template>
  <div class="root">
    <div class="left">
      <Son v-for="(item, index) in arr" :key="item.img" :url="item" @click="handleClick(index)" />
    </div>
    <div class="right">{{ text }}</div>
  </div>
</template>

<script>
import Son from './Son.vue';
export default {
  name: 'QianFeng',
  components: {
    Son
  },
  data() {
    return {
      arr: [{ img: '1.jpeg' }, { img: '2.jpeg' }, { img: '3.jpeg' }],
      text: ''
    };
  },
  methods: {
    handleClick(index) {
      this.text = this.arr[index].img;
    }
  }
};
</script>

<style scoped lang="scss">
.root {
  display: flex;
  border: 1px solid black;
  height: 100%;
  .left {
    width: 50%;
    float: left;
    border: 1px solid aquamarine;
    height: 100%;
  }
  .right {
    width: 50%;
    float: left;
    border: 1px solid aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
